<template>
	<view>
		<!-- #ifdef MP -->
		<!-- 小程序导航栏 -->
		<view class="flex align-center fixed-top" style="background-color: #F6F7F8;height: 44px;">
			<view class="flex flex-1 px-1 ml-2 rounded-circle " style="background-color: #fff;color: #959FA0;">
				<text class="iconfont iconsousuokuang"></text>
				<text class="align-center mt-1 pl-1">请输入搜索内容</text>
			</view>
			<view class="flex align-center px-2" style="color: #959FA0;">分类</view>
		</view>
		<view style="height: 44px;"></view>
		<!-- #endif -->
		<!-- 轮播图 -->
		<view class="px-2 py-1">
			<!-- <view class="position-relative">
				<swiper circular :autoplay="true" :interval="3000" :duration="300" style="height: 250rpx;"  @change="changeSwiper">
					<swiper-item v-for="(items,index) in swipers" :key="index">
						<image  class="rounded-lg" style="height: 250rpx;" :src="items.src" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				<view style="position:absolute;bottom: 0;left: 0;right: 0;height:60rpx;" class="flex align-center text-white rounded-bottom-lg">
					<view class="ml-1" style="width: 80%;">
						{{ swipers[current].title}}
					</view>
					<view style="width: 20%;" class="flex">
						<view v-for="(items,index) in swipers" :key="index" :style=" index === current ? 'background-color: rgba(255,255,255,1)' : 'background-color: rgba(255,255,255,0.5)'" class="rounded ml-1" style="height: 16rpx;width: 16rpx;"></view>
					</view>
				</view>
			</view> -->
			<swiper-dot :info="swipers" :current="current">
				<swiper circular :autoplay="true" :interval="3000" :duration="300" style="height: 250rpx;"  @change="changeSwiper">
					<swiper-item v-for="(items,index) in swipers" :key="index">
						<image  class="rounded-lg" style="height: 250rpx;width: 100%;" :src="items.src" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</swiper-dot>
		</view>
		<!-- 为你推荐 1 -->
			<card title="为你推荐">
				<view class="f-list">
					<view v-for="i in 8" :key="i" class="mt-2" style="margin-left: 15rpx;margin-right: 15rpx;width:328rpx;"  @click="navTo('detail-video')">
						<view style="position: relative;height: 220rpx">
							<image src="/static/demo/list/1.jpg" mode="" class="rounded-lg" style="width:100%;height:220rpx;" ></image>
							<view class="flex text-white" style="height: 65rpx;position:absolute;left:0;right:0;bottom:0;background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.8));">
								<text class="iconfont iconbofangshu font-md mx-1"></text>
								<text class="">250w</text>
								<text class="iconfont icondanmushu font-md mx-1"></text>
								<text class="">5960</text>
							</view>
						</view>	
						<view class="px-1 pb-1 border" >
							<view class="font">标题2</view>
							<view class="flex text-light-muted align-center justify-between">
								<view class="font">标签</view>
								<view class="iconfont icongengduo"></view>
							</view>
						</view>
					</view>
				</view>
			</card>	
		<!-- 为你推荐 2 -->
		<card title="为你推荐2">
			<view class="f-list">
			    <view  v-for="i in 6" :key="i" class="mt-2" style="margin-left: 15rpx;margin-right: 15rpx;width:210rpx;">
					<view style="position:relative;height: 280rpx;">
						<image src="/static/demo/list2/1.webp" mode="scaleToFill" class="rounded-lg" style="width:100%;height: 280rpx;" ></image>
						<view class="flex text-white align-center" style="height:50rpx;position: absolute;left:0;right:0;bottom:0;background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,0.8));">
							<text class="iconfont iconbofangshu font-md mx-1"></text>
							<text class="font">250w</text>
						</view>
					</view>
					<view class="px-1 pb-1 border" >
						<view class="font">标题</view>
					</view>
				</view>	
			</view>
		</card>		
		
		<!-- 为你推荐3 -->
		<card title="为你推荐3">
			<view class="f-list"  >
			    <view v-for="(item,index) in list3" :key="index"  style="width: 100%;">
			    	<media-list :item="item" :index="index"></media-list>
				</view>	
			</view>
		</card>		
	</view>	
</template>

<script>
	import swiperDot from '@/components/common/swiper-dot.vue';
	import card from '@/components/common/card.vue';
	import mediaList from '@/components/common/media-list.vue';
	
	export default {
		components:{
			swiperDot,
			card,
			mediaList
		},
		data() {
			return {
				current: 0,
				swipers:[{
					 src:"/static/demo/swiper/1.jpg",
					 title:"图片1"
					},{
					 src:"/static/demo/swiper/2.jpg",
					 title:"图片2"
					},{
					 src:"/static/demo/swiper/3.jpg",
					 title:"图片3"
					}],
				list3: [
					{
						cover:"/static/demo/list/1.jpg",
						title:"标题",
						create_time:"时间",
						play_count:1230,
						danmu_count:351
					},
					{
						cover:"/static/demo/list/2.jpg",
						title:"标题",
						create_time:"时间",
						play_count:1230,
						danmu_count:351
					}
				]	
			}
		},
		onLoad() {

		},
		methods: {
			changeSwiper(e) {
				// console.log(e);
				this.current = e.detail.current;
			},
			navTo(path){
				uni.navigateTo({
					url:"/pages/" + path + "/" + path
				})
			}
		}
	}
</script>

<style>

</style>
